<template>
  <div>
    <el-row :gutter="24">
      <el-col :span="12">
        <div class="typed-container">
          <span id="typed-element"></span>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="heart"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Typed from "typed.js";
import moment from 'moment'
export default {
  data() {
    return {
      date: '2022-06-29 00:00:00'
    }
  },
  computed: {
    textArr() {
      const dateStr = moment(this.date).format('YYYY年MM月DD日')
      const days = moment().diff(moment(this.date), 'days')
      let result = `我们相识于${dateStr}，已经${days}天了，大部分的时间都被我浪费掉了，没有好好抓紧你<br/>当意识到你有多么重要的时候，已经错过了你，感谢你重新给我一次机会，让我们有了新的开始<br/>2022年07月23日，我们见了第一面，第一次吃到女生专门为我做的菜，第一次摸了你的脸颊，<br/>你害羞的样子真的好讨人喜欢<br/>2022年09月10日，我们又见面了，我们一起去撸串儿，逛西塔夜市，走之前还给我包了虾仁饺子，<br/>送我到了地铁站，当时好想拥抱你，没好意思，哈哈！<br/>真的只见了两次么，为什么记不清楚了……<br/>我们吵过闹过，开始更加理解彼此的脾气<br/>我们吵过的每一次都是因为在乎对方<br/>感情需要经受考验的，而我们已经度过了最艰难的一关<br/>两年间，我们思念过对方，因为我的小倔强、不好意思没有早早的回到你身边<br/>思念一个人，只因错过就是一生<br/>我确信你就是我一直等待的人，一生要守护的人<br/>你可以在我面前软弱，可以对我指指点点，可以抱怨，可以流眼泪<br/>那天你哭了，我很痛，不知所措，深怕又伤害了你<br/>我也很怕，很怕那次的玩笑是真的，还好它只是玩笑<br/>这段感情来之不易，我想好好珍惜，希望以后的日子里我们开开心心，永远不分开<br/>未来的日子很长，以后的时间里，我们能一起承担，一起享受，彼此珍惜彼此包容<br/>拉紧你的手，永远永远……`
      return [result]
    }
  },
  mounted() {
    const options = {
      strings: this.textArr,
      typeSpeed: 50,
      startDelay: 1000,
      backSpeed: 0,
      smartBackspace: true,
      shuffle: false,
      backDelay: Infinity,
      fadeOut: true,
      fadeOutClass: "typed-fade-out",
      fadeOutDelay: 500,
      loop: false,
      loopCount: Infinity,
      showCursor: true,
      cursorChar: "_",
      autoInsertCss: true,
      attr: null,
      bindInputFocusEvents: false,
      contentType: "html",
      onBegin: self => {},
      onComplete: self => {},
      preStringTyped: (arrayPos, self) => {},
      onStringTyped: (arrayPos, self) => {},
      onLastStringBackspaced: self => {},
      onTypingPaused: (arrayPos, self) => {},
      onTypingResumed: (arrayPos, self) => {},
      onReset: self => {},
      onStop: (arrayPos, self) => {},
      onStart: (arrayPos, self) => {},
      onDestroy: self => {},
    };
    new Typed("#typed-element", options);
  },
  methods: {
  }
};
</script>

<style lang="scss" scoped>
.heart {
  --c: red;
  width: 600px;
  aspect-ratio: 1;
  background:
    /* 1 */ radial-gradient(circle at 60% 65%, var(--c) 64%, #0000 65% ) top left/50% 50%,
    /* 2 */ radial-gradient(circle at 40% 65%, var(--c) 64%, #0000 65%) top right/50% 50%,
    /* 3 */ conic-gradient(from -45deg at 50% 85.5%, var(--c) 90deg, #0000 0) bottom/100% 50%;
  background-repeat: no-repeat;
  margin: 200px auto;
  animation: beat 0.7s ease infinite;
  transition: all 0.3s;
}
@keyframes beat {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}
.typed-container {
  padding: 60px 20px 100px 100px;
}
#typed-element {
  line-height: 40px;
  color: red;
  font-size: 18px;
}
</style>
<style lang="scss">
.typed-cursor {
  color: red;
}
</style>
